<template>
  <!--委外管理-受托方管理-->
  <section class="page commissioned-manage">
    <data-form :model="queryModel" @handleResetForm="follFeedback" @onSearch="refreshData" autoSearch>
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="受托方名称" prop="outsName">
          <el-input v-model="queryModel.outsName"></el-input>
        </el-form-item>
        <el-form-item label="机构类型" prop="outSourceType">
          <el-select clearable placeholder="请选择" v-model="queryModel.outSourceType">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('OutSourceType')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织机构" prop="deptId">
          <el-select clearable placeholder="请选择" v-model="queryModel.deptId">
            <el-option :key="item.id" :label="item.deptName" :value="item.id" v-for="item in departmentList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="outsourceStatus">
          <el-select clearable placeholder="请选择" v-model="queryModel.outsourceStatus">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区" prop="areaId">
          <el-input v-model="queryModel.areaId"></el-input>
          <!-- <el-cascader v-model="queryModel.areaId" :options="$city.getCityData()" change-on-select clearable></el-cascader> -->
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataList" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作">
          <template slot-scope="scope">
            <el-button @click="checkDetail(scope)" type="text" v-auth="226">查看</el-button>
            <el-button @click="editDetail(scope)" type="text" v-auth="227">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="受托方名称" prop="outsName"></el-table-column>
        <el-table-column
          :formatter="(row) => $filter.dictConvert(row.outSourceType,'OutSourceType')"
          :min-width="$helper.getColumnWidth(4)"
          label="机构类型"
          prop="outSourceType"
        ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="组织结构" prop="deptName"></el-table-column>
        <el-table-column
          :formatter="(row) => $filter.dictConvert(row.outsourceStatus,'CommonState')"
          :min-width="$helper.getColumnWidth(4)"
          label="状态"
          prop="outSourceType"
        ></el-table-column>
        <el-table-column
          :formatter="row => $city.getInheritNames(row.areaId)"
          :min-width="$helper.getColumnWidth(5)"
          label="地区"
          prop="areaId"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="创建时间" prop="createTime">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(2)" label="创建人" prop="operatorRealName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(2)" label="编辑人" prop="updateRealName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="编辑时间" prop="updateTime">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <el-dialog :center="true" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.commissionedDialog" title="编辑受托方">
      <commissioned-dialog :caseRow.sync="caseRow" @close="dialog.commissionedDialog=false" @refreshData="refreshData" ref="refresh"></commissioned-dialog>
    </el-dialog>
    <el-dialog :center="true" :close-on-press-escape="false" :visible.sync="dialog.commissioned" title="查看受托方">
      <commissioned :caseRow.sync="caseRow" @close="dialog.commissioned=false" ref="refresh"></commissioned>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";

import { OutsourceCommissionedService } from "~/services/domain-service/outsource-commissioned-manage.service";
import CommissionedDialog from "~/components/outsource-manage/commissioned-manage/commissioned-dialog.vue";
import Commissioned from "~/components/outsource-manage/commissioned-manage/commissioned.vue";
import { CityService } from "~/utils/city.service";
import { DepartmentService } from "~/services/management-service/department.service";

@Auth(1001)
@Layout("workspace")
@Component({
  components: {
    CommissionedDialog,
    Commissioned
  }
})
export default class CommissionedManagesIndex extends Vue {
  @Dependencies(OutsourceCommissionedService)
  private outsourceCommissionedService: OutsourceCommissionedService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;

  private proinviceList: any[] = []; // 省
  private cityList: any[] = []; //市
  private departmentList: any[] = []; //组织机构
  private caseRow: any = {}; //查看或编辑某一条row

  private queryModel: any = {
    outsName: "",
    outSourceType: "",
    areaId: "",
    deptId: "",
    deptName: "",
    provinceCode: "",
    outsourceStatus: ""
  };

  private dataList: any[] = [];
  private dialog: any = {
    commissionedDialog: false,
    commissioned: false
  };
  private formData: any = {}; //弹框列表数据
  private refresh: any = {};

  private mounted() {
    this.getDepartments();
    this.refreshData();
    this.getProvinces();
  }
  //获取省数据
  private getProvinces() {
    this.proinviceList = CityService.getCityData({ level: 1 });
  }

  //获取市
  private getCitys(provinceId) {
    this.cityList = this.$city.getCityData({ level: 1, id: provinceId }); // 城市列表
  }

  //获取组织机构
  private getDepartments() {
    this.departmentService.querySubDepartment().subscribe(data => {
      this.departmentList = data;
    });
  }

  private refreshData() {
    this.outsourceCommissionedService
      .searchCutsourceList(this.queryModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataList = data;
      });
  }
  /**
   * 修改
   */
  private editDetail(scope) {
    this.dialog.commissionedDialog = true;
    this.caseRow = {
      name: scope.row.outsName,
      organizationType: scope.row.outSourceType,
      status: scope.row.outsourceStatus,
      companyCode: scope.row.companyCode,
      deptName: scope.row.deptName,
      proinviceCode: scope.row.areaId,
      cityCode: scope.row.areaId,
      address: scope.row.outsAddress,
      linkMan: scope.row.outsContacts,
      linkPhone: scope.row.outsPhone,
      remark: scope.row.outsRemark,
      email: scope.row.email,
      areaId: scope.row.areaId,
      areaCodeIds: scope.row.areaCodeIds,
      id: scope.row.id
    };
  }

  /**
   * 查看
   */
  private checkDetail(scope) {
    this.dialog.commissioned = true;
    this.caseRow = scope.row;
  }

  /**
   * 重置numberRange
   */
  private follFeedback() {
    this.queryModel.proinviceCode = "";
    this.queryModel.areaCodeIds = "";
  }
}
</script>

<style lang="less">
</style>
